<template>
	<el-card style="height: 500px">
		<el-card
			v-show="isShow"
			class="image_button"
			style="
				 {
					padding: 20px;
				}
			"
		>
			<img src="/img.png" alt="默认背景" style="display: block; margin-left: auto; margin-right: auto" />
		</el-card>
		<el-card
			v-show="!isShow"
			class="image_button"
			style="
				 {
					padding: 20px;
				}
			"
		>
			<el-card :style="{ visibility: picShow ? 'visible' : 'hidden' }">
				<h1>相似度为: {{ path }}</h1>
			</el-card>
			<el-upload
				ref="uploadRef"
				class="upload-demo"
				:http-request="uploadFiles"
				:auto-upload="false"
				:on-success="handleSuccess"
				multiple="true"
				limit="2"
				style="margin: 200px 0px 0px 300px"
			>
				<template #trigger>
					<el-button type="primary" class="mr-10">待原始/待鉴别的图像</el-button>
				</template>

				<el-button class="ml-3" type="success" @click="submitUpload">点击鉴别</el-button>
				<template #tip>
					<div class="el-upload__tip">图片格式为jpg/png，图片需要在1MB-100MB</div>
				</template>
			</el-upload>
		</el-card>
		<el-button type="primary" style="float: right; margin-right: 400px" @click="changeStatus()">相似度检测</el-button>
	</el-card>
</template>

<script setup lang="ts" name="imageIndex">
import { reactive, ref } from 'vue'
import { ElMessage, UploadFile, UploadFiles, UploadInstance, UploadProps, UploadUserFile } from 'element-plus'
import constant from '@/utils/constant'
import service from '@/utils/request'

//变动
let isShow = ref(true)
const url = import.meta.env.VITE_API_URL
const def = ref(url)
const path = ref('')
//图片是否展示
let picShow = ref(false)
const changeStatus = () => {
	isShow.value = !isShow.value
}

//文件结构体
const dataForm = reactive({
	sysObjectId: '',
	sysObjectName: '',
	sysObjectPath: '',
	sysOrgId: '',
	sysObjectSize: '',
	updater: ''
})
const fileList = reactive([])
//上传图片
const uploadRef = ref<UploadInstance>()

const submitUpload = () => {
	uploadRef.value!.submit()
}
const flag = ref(0)
const formData = new FormData()
const uploadFiles = async file => {
	++flag.value
	console.log('查看file1')
	console.log(file)
	if (flag.value == 1) {
		formData.append('imgWm', file.file)
	}
	if (flag.value == 2) {
		console.log('执行上传操作')
		formData.append('imgOri', file.file)
		await service.post(constant.similarityUrl, formData).then(res => {
			path.value = res.data
		})
	}
	if (flag.value > 2) {
		ElMessage.error('文件上传数目不对')
	}
}

const handleSuccess: UploadProps['onSuccess'] = (res: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
	console.log('打印上传以后的信息' + JSON.stringify(res))
	if (res && res.code !== 0) {
		ElMessage.error('上传失败：' + res.msg)
		return false
	} else {
		ElMessage.success('上传成功')
	}
	picShow.value = true
	uploadRef.value?.clearFiles()
}
</script>

<style>
/* 设置右边距 */
.mr-10 {
	margin-right: 30px;
}
.el-upload__tip {
	margin-left: 15px;
}
.image_button {
	height: 400px;
	overflow-y: auto;
	border: none;
}
/* 上传框样式 */
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}
.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
</style>
